<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>focus 焦点图实例3</title>
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/common.js" ></script>
<style>
	.focus-wrap{width:720px;height: 404px;overflow: hidden;position: relative;}
	.focus-wrap ul{width:100%; height: 100%; position:absolute; top:0; left: 0; overflow: hidden;}
	.focus-wrap ul li{width:720px; height: 404px; float: left; display: inline;}
	.prenbtn{width:50px; height: 45px; display: block; position: absolute; top:175px; cursor: pointer; left:0; background: url(images/focus/prev.png) no-repeat; z-index: 9999;}
	.nextbtn{width:50px; height: 45px; display: block; position: absolute; top:175px; cursor: pointer; right:0; background: url(images/focus/next.png) no-repeat; z-index: 9999;}
	.focus-point{width:100%; position: absolute; height: 16px; bottom:16px; text-align: center; z-index: 9999;}
	.focus-point i{width:16px; height: 16px; background: #fff; display: inline-block; margin-right: 8px; text-indent: -999px; border-radius: 50%; cursor: pointer; opacity: .3;}
	.focus-point i.curr{background: #119DE8; opacity: 1;}
</style>
</head>
<body>
<div class="wrap">
	<h2 class="wrap-h2">focus 焦点图</h2>
	<div class="wrap-main">
		<div class="focus-wrap" id="focus">
			<ul>
				<li><a href="#" title="1"><img src="images/focus/b1.jpg"></a></li>
				<li><a href="#" title="2"><img src="images/focus/b2.jpg"></a></li>
				<li><a href="#" title="3"><img src="images/focus/b3.jpg"></a></li>
				<li><a href="#" title="4"><img src="images/focus/b4.jpg"></a></li>
				<li><a href="#" title="5"><img src="images/focus/b5.jpg"></a></li>
				<li><a href="#" title="6"><img src="images/focus/b6.jpg"></a></li>
			</ul>
			<span class="prenbtn"></span>
			<span class="nextbtn"></span>
		</div>
	</div>
</div>
<script>
	window.onload = function ()
	{
		
		var key = 0;													// 控制播放的张数
        var circle = 0;													// 控制小圆点
		var oDiv = document.getElementById("focus");					//获取大盒子
		var oPreBtn = miaov.common.getByClass("focus","prenbtn")[0];	//上一个按钮
		var oNextBtn = miaov.common.getByClass("focus","nextbtn")[0];	//下一个按钮
		var oUl = oDiv.getElementsByTagName("ul")[0];					//获取ul
		var oLi = oUl.getElementsByTagName("li");						//获取一个li
		var oLiWidth = oUl.getElementsByTagName("li")[0].offsetWidth;	//获取一个滚动的宽度
		var timer = null;												//定时器
		
		/*添加圆点结构*/
		var cir	= document.createElement("div");
		cir.className = "focus-point";
		var oIdemo = "";
		for (var i=0; i<oLi.length; i++)
		{
			oIdemo += '<i index="' + i + '"></i>'
		}
		cir.innerHTML = oIdemo;
		oDiv.appendChild(cir);
		
		var oCil = oDiv.getElementsByClassName("focus-point")[0];
		var oCilli = oCil.getElementsByTagName("i");
		oCilli[0].className = "curr";
		
		oUl.style.width = oLiWidth * oLi.length + 'px';
		
		
		/*自动播放*/
		timer = setInterval(function(){
			key++;
			if(key == oLi.length)
			{
				key=0;
			}
			changepic(oUl,-key*oLiWidth);
			
			/*图片和圆点添加curr class*/
			for(var i=0; i<oLi.length; i++)
			{
				oLi[i].className = ""; 
				oCilli[i].className = "";
			}
			oLi[key].className = "curr";
			oCilli[key].className = "curr";
			
			circleauto();
			
		},2000)
		
		/*向下按钮*/
		oNextBtn.onclick = function ()
		{
			key++;
			if(key == oLi.length)
			{
				key=0;
			}
			for(var i=0; i<oLi.length; i++)
			{
				oCilli[i].className = "";
			}
			oCilli[key].className = "curr";
			changepic(oUl,-key*oLiWidth);
		}
		
		/*向上按钮*/
		oPreBtn.onclick = function ()
		{
			key--;
			if(key <= 0)
			{
				key=oLi.length-1;
			}
			for(var i=0; i<oLi.length; i++)
			{
				oCilli[i].className = "";
			}
			oCilli[key].className = "curr";
			changepic(oUl,-key*oLiWidth);
		}
		
		/*圆点 -事件*/
		function circleauto()
		{
			for(var i=0; i<oLi.length; i++)
			{
				oCilli[i].index = i;
				oCilli[i].onclick = function ()
				{
					for(var i=0; i<oLi.length; i++)
					{
						oCilli[i].className = "";
					}
					oCilli[this.index].className = "curr";
					key = this.index;
					changepic(oUl,-key*oLiWidth);
				}
			}
		}
		
		/*悬停 暂停*/
		oDiv.onmouseover = function ()
		{
			clearInterval(timer);
		}
		
		/*离开 启动*/
		oDiv.onmouseout =  function ()
		{
			timer = setInterval(function(){
				key++;
				if(key == oLi.length)
				{
					key=0;
				}
				changepic(oUl,-key*oLiWidth);
				
				/*图片和圆点添加curr class*/
				for(var i=0; i<oLi.length; i++)
				{
					oLi[i].className = ""; 
					oCilli[i].className = "";
				}
				oLi[key].className = "curr";
				oCilli[key].className = "curr";
				
			},2000)
			
		}
		
		/*动画函数*/
		function changepic(obj,iTarget)
		{
			// 首先清除掉定时器
            //clearInterval(obj.timer);
            // 用来判断 是+ 还是 -  即说明向左走还是向右走
            //var speed = obj.offsetLeft < iTarget ? 15 : -15;
            obj.style.left = iTarget + "px";
            console.log(key)
            console.log(obj.style.left)
		}
		
	}
</script>
</body>
</html>
